<!DOCTYPE html>
<html>
<head>
    <title>颜色反转</title>
    <style>
        #circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 2px solid white;
            position: absolute;
            pointer-events: none;
            transform: translate(-50%, -50%);
            background-color: #ffffff; /* 设置圆的背景颜色 */
            mix-blend-mode: difference; /* 设置混合模式为difference */
        }
        canvas {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
    </style>
</head>
<body>
    <div id="circle"></div>
    <canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
        width=window.innerWidth;
        height=window.innerHeight;
		canvas.width = width;
		canvas.height = height;

		var ctx = canvas.getContext("2d");
		var img = new Image();
		img.src = "https://picsum.photos/"+width+"/"+height+".webp";
		img.onload = function() {
			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
		};
        window.addEventListener("mousemove", function(event) {
            var circle = document.getElementById("circle");
            var x = event.clientX;
            var y = event.clientY;
            circle.style.left = x + "px";
            circle.style.top = y + "px";
            circle.style.borderColor = invertColor(circle.style.borderColor);
            document.body.style.backgroundColor = invertColor(circle.style.borderColor);
        });
        function invertColor(color) {
            color = color.substring(4, color.length-1)
                     .replace(/ /g, '')
                     .split(',');
            var r = 255 - parseInt(color[0]);
            var g = 255 - parseInt(color[1]);
            var b = 255 - parseInt(color[2]);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
    </script>
</body>
</html>